import classNames from "classnames";
import style from "./index.module.scss";
const Home: React.FC = () => {
  const [isExpand, setIsExpand] = useState(false);
  const handleMore = () => {
    console.log("Read More");
    setIsExpand(!isExpand);
  };
  const handleNextStory = () => {
    console.log("Next Story");
  };
  return (
    <div className={classNames([style.home, "flex-col-20px"])}>
      <div className="item-padding flex-col-20px">
        <div className="news-style-01 flex-col-10px">
          <div className="cover">
            <img src={getImg("demo.png")} alt="" />
            <div className="info">
              <div className="flex-start">
                <img className="bg-img" src={getImg("demo.png")} alt="" />
                <div className="name">
                  <div className="title">TribunNews</div>
                  <div className="position">
                    <img
                      className="img"
                      src={getImg("Group 13@2x.png")}
                      alt=""
                    />
                    <i>·</i>
                    <i>Science Team</i>
                  </div>
                </div>
              </div>
              <div className="flex-end">
                <div className="date">21-06-2024</div>
                <div className="divider">|</div>
                <div className="time">2 min read</div>
              </div>
            </div>
          </div>
          <div className="desc flex-col-10px">
            <div className="title">
              Headset Apple Vision Pro Bakal Kebagian Fitur Apple Intelligence
            </div>
            <div className="content limit-5lines expand-el-01">
              GridHEALTH.id – Bayi berusia 2 bulan 28 hari, berinisial MKA,
              meninggal dunia setelah menerima imunisasi di Puskesmas Sukakarya,
              KotaSukabumi. Imunisasi yang diberikan meliputi suntik BCG, tetes
              polio, suntik DPT, dan tetes rotavirus. Dikutip dari Kompas.com,
              Wita Darmawati, Kepala Bidang Pencegahan dan Pengendalian Penyakit
            </div>
          </div>
          {isExpand && (
            <div>
              <div className="cover">
                <img src={getImg("demo.png")} alt="" />
                <div className="info">
                  <div className="flex-start">
                    <img className="bg-img" src={getImg("demo.png")} alt="" />
                    <div className="name">
                      <div className="title">TribunNews</div>
                      <div className="position">
                        <img
                          className="img"
                          src={getImg("Group 13@2x.png")}
                          alt=""
                        />
                        <i>·</i>
                        <i>Science Team</i>
                      </div>
                    </div>
                  </div>
                  <div className="flex-end">
                    <div className="date">21-06-2024</div>
                    <div className="divider">|</div>
                    <div className="time">2 min read</div>
                  </div>
                </div>
              </div>
              <div className="desc flex-col-10px">
                <div className="title">
                  Headset Apple Vision Pro Bakal Kebagian Fitur Apple
                  Intelligence
                </div>
                <div className="content limit-5lines expand-el-01">
                  GridHEALTH.id – Bayi berusia 2 bulan 28 hari, berinisial MKA,
                  meninggal dunia setelah menerima imunisasi di Puskesmas
                  Sukakarya, KotaSukabumi. Imunisasi yang diberikan meliputi
                  suntik BCG, tetes polio, suntik DPT, dan tetes rotavirus.
                  Dikutip dari Kompas.com, Wita Darmawati, Kepala Bidang
                  Pencegahan dan Pengendalian Penyakit
                </div>
              </div>

              <div className="emote flex-col-10px">
                <div className="title">
                  <div className="start">Terima Kasih untuk Votingnya</div>
                  <div className="end">powered by vilykke</div>
                </div>

                <div className="list">
                  <div className="item">
                    <img src={getImg("happy.png")} alt="" />
                    <div className="name">
                      <div className="txt">happy</div>
                      <div className="rate">27%</div>
                    </div>
                  </div>

                  <div className="item">
                    <img src={getImg("happy.png")} alt="" />
                    <div className="name">
                      <div className="txt">happy</div>
                      <div className="rate">27%</div>
                    </div>
                  </div>

                  <div className="item">
                    <img src={getImg("happy.png")} alt="" />
                    <div className="name">
                      <div className="txt">happy</div>
                      <div className="rate">27%</div>
                    </div>
                  </div>

                  <div className="item">
                    <img src={getImg("happy.png")} alt="" />
                    <div className="name">
                      <div className="txt">happy</div>
                      <div className="rate">27%</div>
                    </div>
                  </div>

                  <div className="item">
                    <img src={getImg("happy.png")} alt="" />
                    <div className="name">
                      <div className="txt">happy</div>
                      <div className="rate">27%</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
          {isExpand && (
            <div onClick={handleNextStory} className="next-story">
              <div className="txt">Next Story</div>
              <img src={getImg("next@2x.png")} alt="" />
            </div>
          )}
          {!isExpand && (
            <div onClick={handleMore} className="read-more">
              Read More
            </div>
          )}
        </div>
        {isExpand && (
          <div onClick={handleMore} className="drag-up">
            <img src={getImg("uparrow@2x.png")} alt="" />
            <div className="flex">
              <div className="start"></div>
              <div className="center">
                <p>Drag up</p>
                <p>for more stories</p>
              </div>
              <div className="end"></div>
            </div>
          </div>
        )}
        <div className="ads-01">
          <img src={getImg("demo.png")} alt="" />
          <div className="mask"></div>
          <div className="title">ads</div>
        </div>
      </div>
      <div className="tabs">
        <img src={getImg("Group 13@2x.png")} alt="" />
        <div className="scroll-x">
          <div className="scroll-item active">For You</div>
          <div className="scroll-item">World Cup</div>
          <div className="scroll-item">Sports</div>
          <div className="scroll-item">Entertainment</div>
        </div>
      </div>
      <div className="item-padding">
        <div className="news-style-02">
          <div className="padding">
            <div className="cover">
              <img src={getImg("demo.png")} alt="" />
              <div className="info">
                <div className="flex-start">
                  <img className="bg-img" src={getImg("demo.png")} alt="" />
                  <div className="name">
                    <div className="title">TribunNews</div>
                  </div>
                </div>
                <div className="flex-end">
                  <div className="date">08:25:57 01 Jun, 2024</div>
                  <div className="divider">|</div>
                  <div className="time">2 min read</div>
                </div>
              </div>
            </div>
            <div className="desc flex-col-10px">
              <div className="title">
                Headset Apple Vision Pro Bakal Kebagian Fitur Apple Intelligence
              </div>
              <div className="content">
                Apple akan menambahkan fitur Apple Intelligence (AI) yang
                berbasis artificial intelligence atau kecerdasan buatan ke
                headset buatannya Apple Vision Pro. Sebelumnya, Apple telah
                menghadirkan fitur AI itu ke dalam iPhone,adirkan fitur AI itu
                ke dalam... <a href="#">Read More</a>
              </div>
            </div>
          </div>
          <div className="ads-03">ads</div>
        </div>
      </div>
      <div className="ads-02 item-padding">
        <div className="item">ads</div>
      </div>
      <div className="item-padding">
        <div className="news-style-02">
          <div className="padding">
            <div className="cover">
              <img src={getImg("demo.png")} alt="" />
              <div className="info">
                <div className="flex-start">
                  <img className="bg-img" src={getImg("demo.png")} alt="" />
                  <div className="name">
                    <div className="title">TribunNews</div>
                  </div>
                </div>
                <div className="flex-end">
                  <div className="date">08:25:57 01 Jun, 2024</div>
                  <div className="divider">|</div>
                  <div className="time">2 min read</div>
                </div>
              </div>
            </div>
            <div className="desc flex-col-10px">
              <div className="title">
                Headset Apple Vision Pro Bakal Kebagian Fitur Apple Intelligence
              </div>
              <div className="content">
                Apple akan menambahkan fitur Apple Intelligence (AI) yang
                berbasis artificial intelligence atau kecerdasan buatan ke
                headset buatannya Apple Vision Pro. Sebelumnya, Apple telah
                menghadirkan fitur AI itu ke dalam iPhone,adirkan fitur AI itu
                ke dalam... <a href="#">Read More</a>
              </div>
            </div>
          </div>
          <div className="ads-03">ads</div>
        </div>
      </div>
      <div className="ads-02 item-padding">
        <div className="item">ads</div>
      </div>
    </div>
  );
};
export default Home;
